import { Modal } from 'antd';
import NiceModal, { useModal } from '@ebay/nice-modal-react';
import { useState } from 'react'
import { Radio, Space, Tag } from 'antd';

export default NiceModal.create((params) => {
  
  const modal = useModal();

  const [value, setValue] = useState(1);
  const onChange = (e) => {
    setValue(e.target.value);
  };

  const onOk = ()=>{
    modal.resolve(value)
    modal.hide();
  }

  return (
    <Modal
      title="检测到多个设备，请选择连接到哪个?"
      onOk={onOk}
      open={modal.visible}
      onCancel={() => modal.hide()}
      afterClose={() => modal.remove()}
    >
      <Radio.Group onChange={onChange} value={value}>
        <Space direction="vertical">
          {params.devices.map(item =><Radio key={item.id} disabled={item.status==="offline"} value={item.id}>{item.id} {item.status==="offline" && <Tag color="#f50">离线</Tag>}</Radio>)}
        </Space>
      </Radio.Group>
    </Modal>
  );
});